<template>
  <div class="kpi-card">
    <div class="kpi-title">在线设备数</div>
    <div class="kpi-value">
      {{ onlineCount }}
      <span :class="trendClass">{{ trendSymbol }}{{ Math.abs(trendPercent) }}%</span>
    </div>
    <div class="kpi-desc">对比昨日/上周同期</div>
  </div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
// 演示用随机数
const onlineCount = ref(Math.floor(Math.random()*1000+800));
const trendPercent = ref(Math.round((Math.random()-0.5)*20));
const trendClass = computed(() => trendPercent.value >= 0 ? 'trend-up' : 'trend-down');
const trendSymbol = computed(() => trendPercent.value >= 0 ? '↑' : '↓');
</script>
<style scoped>
.kpi-card { background: #fff; border-radius: 12px; padding: 18px 8px; text-align: center; box-shadow: 0 2px 8px #f0f1f2; min-width: 180px; }
.kpi-title { font-size: 16px; color: #888; margin-bottom: 8px; }
.kpi-value { font-size: 32px; font-weight: bold; }
.trend-up { color: #2ecc40; margin-left: 8px; font-size: 18px; }
.trend-down { color: #e74c3c; margin-left: 8px; font-size: 18px; }
.kpi-desc { font-size: 13px; color: #bbb; margin-top: 6px; }
</style>